<template>
  <div class="login-container">
    <!-- 头部Logo -->
    <div class="login-header">
      <div class="container">
        <a href="#" class="logo-title">KEXIO<span class="logo-subtitle">FORUM</span></a>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="login-main">
      <!-- 注册卡片 -->
      <div class="login-card">
        <h1 class="login-title">创建新账号</h1>
        
        <!-- 注册表单 -->
        <el-form
          ref="registerFormRef"
          :model="registerForm"
          :rules="registerRules"
          autocomplete="off"
          label-position="left"
          :scroll-to-error="true"
        >
          <!-- 租户选择 -->
          <el-form-item v-if="tenantEnabled" prop="tenantId">
            <label class="form-label">租户</label>
            <el-input
              v-model="registerForm.tenantId"
              placeholder="请选择租户（可选）"
              class="form-input"
            >
              <template #prefix>
                <i class="fas fa-building input-icon"></i>
              </template>
            </el-input>
          </el-form-item>

          <!-- 两列布局：用户名和昵称 -->
          <div class="form-row">
            <el-form-item prop="username" class="form-col">
              <label class="form-label">用户名</label>
              <el-input
                v-model="registerForm.username"
                placeholder="4-20位字母数字"
                name="username"
                type="text"
                tabindex="1"
                autocomplete="off"
                clearable
                class="form-input"
                @blur="checkUsernameAvailable"
              >
                <template #prefix>
                  <i class="fas fa-user input-icon"></i>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item prop="nickname" class="form-col">
              <label class="form-label">昵称</label>
              <el-input
                v-model="registerForm.nickname"
                placeholder="2-20个字符"
                name="nickname"
                type="text"
                tabindex="2"
                autocomplete="off"
                clearable
                class="form-input"
              >
                <template #prefix>
                  <i class="fas fa-id-card input-icon"></i>
                </template>
              </el-input>
            </el-form-item>
          </div>

          <!-- 邮箱地址和验证码 -->
          <div class="form-row">
            <!-- 邮箱地址 (2/3宽度) -->
            <div class="form-col-2">
              <el-form-item prop="email">
                <label class="form-label">邮箱地址</label>
                <el-input
                  v-model="registerForm.email"
                  placeholder="请输入常用邮箱地址"
                  name="email"
                  type="email"
                  tabindex="3"
                  autocomplete="off"
                  clearable
                  class="form-input"
                  @blur="checkEmailAvailable"
                >
                  <template #prefix>
                    <i class="fas fa-envelope input-icon"></i>
                  </template>
                  <template #suffix>
                    <el-tooltip
                      :content="countdown > 0 ? `${countdown}秒后可重新发送` : (codeSending ? '发送中...' : '发送验证码')"
                      placement="top"
                    >
                      <i
                        :class="['fas', codeSending ? 'fa-spinner fa-spin' : (countdown > 0 ? 'fa-clock' : 'fa-paper-plane'), 'send-icon']"
                        :style="{ 
                          cursor: (codeSending || countdown > 0 || !registerForm.email) ? 'not-allowed' : 'pointer',
                          opacity: (codeSending || countdown > 0 || !registerForm.email) ? 0.5 : 1
                        }"
                        @click="sendEmailCodeFromIcon"
                      ></i>
                    </el-tooltip>
                  </template>
                </el-input>
              </el-form-item>
            </div>

            <!-- 邮箱验证码 (1/3宽度) -->
            <div class="form-col-1">
              <el-form-item prop="emailCode">
                <label class="form-label">验证码</label>
                <el-input
                  v-model="registerForm.emailCode"
                  placeholder="6位验证码"
                  name="emailCode"
                  type="text"
                  tabindex="4"
                  autocomplete="off"
                  clearable
                  maxlength="6"
                  class="form-input"
                >
                  <template #prefix>
                    <i class="fas fa-shield-alt input-icon"></i>
                  </template>
                </el-input>
              </el-form-item>
            </div>
          </div>
          
          <!-- 验证码提示 -->
          <div class="form-hint email-hint">
            验证码将发送到您的邮箱，有效期5分钟
          </div>

          <!-- 手机号（可选） -->
          <el-form-item prop="phone">
            <label class="form-label">手机号（选填）</label>
            <el-input
              v-model="registerForm.phone"
              placeholder="11位手机号码"
              name="phone"
              type="tel"
              tabindex="5"
              autocomplete="off"
              clearable
              class="form-input"
              maxlength="11"
            >
              <template #prefix>
                <i class="fas fa-mobile-alt input-icon"></i>
              </template>
            </el-input>
          </el-form-item>

          <!-- 两列布局：密码和确认密码 -->
          <div class="form-row">
            <el-form-item prop="password" class="form-col">
              <label class="form-label">密码</label>
              <el-input
                :key="passwordType"
                v-model="registerForm.password"
                :type="passwordType"
                placeholder="6-32位字符"
                name="password"
                tabindex="6"
                autocomplete="new-password"
                class="form-input"
                @input="checkPasswordStrength"
              >
                <template #prefix>
                  <i class="fas fa-lock input-icon"></i>
                </template>
                <template #suffix>
                  <span class="password-toggle" @click="showPwd">
                    <i class="fas" :class="passwordType === 'password' ? 'fa-eye' : 'fa-eye-slash'"></i>
                  </span>
                </template>
              </el-input>
              <!-- 密码强度指示器 -->
              <div v-if="registerForm.password" class="password-strength">
                <div class="strength-bar">
                  <div 
                    class="strength-fill" 
                    :class="passwordStrengthClass"
                    :style="{ width: passwordStrengthWidth }"
                  ></div>
                </div>
                <span class="strength-text" :class="passwordStrengthClass">
                  {{ passwordStrengthText }}
                </span>
              </div>
            </el-form-item>

            <el-form-item prop="confirmPassword" class="form-col">
              <label class="form-label">确认密码</label>
              <el-input
                :key="confirmPasswordType"
                v-model="registerForm.confirmPassword"
                :type="confirmPasswordType"
                placeholder="再次输入密码"
                name="confirmPassword"
                tabindex="7"
                autocomplete="new-password"
                class="form-input"
                @keyup.enter="handleRegister"
              >
                <template #prefix>
                  <i class="fas fa-lock input-icon"></i>
                </template>
                <template #suffix>
                  <span class="password-toggle" @click="showConfirmPwd">
                    <i class="fas" :class="confirmPasswordType === 'password' ? 'fa-eye' : 'fa-eye-slash'"></i>
                  </span>
                </template>
              </el-input>
            </el-form-item>
          </div>

          <!-- 用户协议 -->
          <el-form-item prop="agreedToTerms">
            <el-checkbox v-model="registerForm.agreedToTerms" class="remember-me">
              我已阅读并同意
              <a href="javascript:;" class="link-text" @click="showTermsDialog = true">《用户协议》</a>
              和
              <a href="javascript:;" class="link-text" @click="showPrivacyDialog = true">《隐私政策》</a>
            </el-checkbox>
          </el-form-item>

          <!-- 注册按钮 -->
          <el-button
            :loading="loading"
            type="primary"
            class="login-button"
            @click.prevent="handleRegister"
          >
            立即注册
          </el-button>
          
          <!-- 登录链接 -->
          <div class="register-link">
            <p>已有账号？ <router-link to="/login" class="register-text">立即登录</router-link></p>
          </div>
        </el-form>
      </div>
    </div>

    <!-- 底部信息 -->
    <div class="login-footer">
      <div class="container">
        <p>© 2023 KEXIO FORUM. 保留所有权利。</p>
        <div class="footer-links">
          <a href="#" class="footer-link">关于我们</a>
          <a href="#" class="footer-link">使用条款</a>
          <a href="#" class="footer-link">隐私政策</a>
          <a href="#" class="footer-link">帮助中心</a>
        </div>
      </div>
    </div>

    <!-- 用户协议对话框 -->
    <el-dialog
      v-model="showTermsDialog"
      title="用户协议"
      width="80%"
      :max-width="800"
    >
      <div class="dialog-content">
        <h3>1. 服务条款</h3>
        <p>欢迎使用 KEXIO FORUM。请仔细阅读以下服务条款...</p>
        
        <h3>2. 用户权益</h3>
        <p>您在使用本平台时享有以下权益...</p>
        
        <h3>3. 用户责任</h3>
        <p>您同意遵守以下规定...</p>
      </div>
      <template #footer>
        <el-button type="primary" @click="showTermsDialog = false">
          我已阅读
        </el-button>
      </template>
    </el-dialog>

    <!-- 隐私政策对话框 -->
    <el-dialog
      v-model="showPrivacyDialog"
      title="隐私政策"
      width="80%"
      :max-width="800"
    >
      <div class="dialog-content">
        <h3>1. 信息收集</h3>
        <p>我们会收集以下信息...</p>
        
        <h3>2. 信息使用</h3>
        <p>您的信息将用于...</p>
        
        <h3>3. 信息保护</h3>
        <p>我们采取以下措施保护您的信息...</p>
      </div>
      <template #footer>
        <el-button type="primary" @click="showPrivacyDialog = false">
          我已阅读
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElForm } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { authApi } from '@/api/auth'
import type { RegisterRequest } from '@/types/api'

const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const savedTenantId = localStorage.getItem('kexio-tenant-id') || 'default'
const registerForm = reactive<RegisterRequest>({
  username: '',
  password: '',
  confirmPassword: '',
  nickname: '',
  email: '',
  emailCode: '',
  phone: '',
  tenantId: savedTenantId,
  agreedToTerms: false
})

// 自定义验证规则
const validateUsername = (_rule: any, value: string, callback: Function) => {
  // 先检查后端错误
  if (backendErrors.username) {
    const error = backendErrors.username
    backendErrors.username = '' // 清除错误
    callback(new Error(error))
    return
  }
  
  if (!value) {
    callback(new Error('请输入用户名'))
  } else if (!/^[a-zA-Z0-9_]{4,20}$/.test(value)) {
    callback(new Error('用户名必须是4-20位字母、数字或下划线'))
  } else {
    callback()
  }
}

const validatePassword = (_rule: any, value: string, callback: Function) => {
  if (!value) {
    callback(new Error('请输入密码'))
  } else if (value.length < 6 || value.length > 32) {
    callback(new Error('密码长度必须在6-32位之间'))
  } else {
    callback()
  }
}

const validateConfirmPassword = (_rule: any, value: string, callback: Function) => {
  if (!value) {
    callback(new Error('请再次输入密码'))
  } else if (value !== registerForm.password) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

const validateEmail = (_rule: any, value: string, callback: Function) => {
  // 先检查后端错误
  if (backendErrors.email) {
    const error = backendErrors.email
    backendErrors.email = '' // 清除错误
    callback(new Error(error))
    return
  }
  
  if (!value) {
    callback(new Error('请输入邮箱地址'))
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
    callback(new Error('请输入正确的邮箱格式'))
  } else {
    callback()
  }
}

const validatePhone = (_rule: any, value: string, callback: Function) => {
  // 先检查后端错误
  if (backendErrors.phone) {
    const error = backendErrors.phone
    backendErrors.phone = '' // 清除错误
    callback(new Error(error))
    return
  }
  
  if (!value) {
    callback() // 手机号可选
  } else if (!/^1[3-9]\d{9}$/.test(value)) {
    callback(new Error('请输入正确的手机号格式'))
  } else {
    callback()
  }
}

const validateTerms = (_rule: any, value: boolean, callback: Function) => {
  if (!value) {
    callback(new Error('请阅读并同意用户协议和隐私政策'))
  } else {
    callback()
  }
}

const validateEmailCode = (_rule: any, value: string, callback: Function) => {
  // 先检查后端错误
  if (backendErrors.emailCode) {
    const error = backendErrors.emailCode
    backendErrors.emailCode = '' // 清除错误
    callback(new Error(error))
    return
  }
  
  if (!value) {
    callback(new Error('请输入邮箱验证码'))
  } else if (!/^\d{6}$/.test(value)) {
    callback(new Error('验证码必须是6位数字'))
  } else {
    callback()
  }
}

const registerRules = {
  username: [{ validator: validateUsername, trigger: 'blur' }],
  password: [{ validator: validatePassword, trigger: 'blur' }],
  confirmPassword: [{ validator: validateConfirmPassword, trigger: 'blur' }],
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '昵称长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  email: [{ validator: validateEmail, trigger: 'blur' }],
  emailCode: [{ validator: validateEmailCode, trigger: 'blur' }],
  phone: [{ validator: validatePhone, trigger: 'blur' }],
  agreedToTerms: [{ validator: validateTerms, trigger: 'change' }]
}

const loading = ref(false)
const passwordType = ref('password')
const confirmPasswordType = ref('password')
const passwordStrength = ref(0)
const showTermsDialog = ref(false)
const showPrivacyDialog = ref(false)
const codeSending = ref(false)
const countdown = ref(0)
let countdownTimer: number | null = null

// 后端验证错误
const backendErrors = reactive<Record<string, string>>({
  username: '',
  email: '',
  emailCode: '',
  phone: ''
})

// 引用
const registerFormRef = ref<InstanceType<typeof ElForm>>()

// 计算属性
const tenantEnabled = computed(() => import.meta.env.VITE_TENANT_ENABLED === 'true')

const passwordStrengthClass = computed(() => {
  if (passwordStrength.value <= 1) return 'weak'
  if (passwordStrength.value === 2) return 'medium'
  return 'strong'
})

const passwordStrengthWidth = computed(() => {
  return `${(passwordStrength.value / 3) * 100}%`
})

const passwordStrengthText = computed(() => {
  if (passwordStrength.value === 0) return '太弱'
  if (passwordStrength.value === 1) return '弱'
  if (passwordStrength.value === 2) return '中等'
  return '强'
})

// 方法
const showPwd = () => {
  passwordType.value = passwordType.value === 'password' ? '' : 'password'
}

const showConfirmPwd = () => {
  confirmPasswordType.value = confirmPasswordType.value === 'password' ? '' : 'password'
}

// 检查密码强度
const checkPasswordStrength = (password: string) => {
  let strength = 0
  
  if (password.length >= 8) strength++
  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++
  if (/\d/.test(password)) strength++
  if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) strength++
  
  passwordStrength.value = Math.min(strength, 3)
}

// 检查用户名是否可用（可选实现）
const checkUsernameAvailable = async () => {
  if (!registerForm.username || !/^[a-zA-Z0-9_]{4,20}$/.test(registerForm.username)) {
    return
  }
  // TODO: 调用后端API检查用户名是否已存在
  console.log('检查用户名可用性:', registerForm.username)
}

// 检查邮箱是否可用（可选实现）
const checkEmailAvailable = async () => {
  if (!registerForm.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(registerForm.email)) {
    return
  }
  // TODO: 调用后端API检查邮箱是否已存在
  console.log('检查邮箱可用性:', registerForm.email)
}

// 发送邮箱验证码
const sendEmailCode = async () => {
  // 验证邮箱格式
  if (!registerForm.email) {
    ElMessage.warning('请先输入邮箱地址')
    return
  }
  
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(registerForm.email)) {
    ElMessage.warning('请输入正确的邮箱格式')
    return
  }
  
  codeSending.value = true
  
  try {
    await authApi.sendEmailCode(registerForm.email)
    
    ElMessage.success('验证码已发送，请查收邮箱（5分钟内有效）')
    
    // 开始倒计时（60秒）
    countdown.value = 60
    countdownTimer = window.setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        if (countdownTimer !== null) {
          window.clearInterval(countdownTimer)
          countdownTimer = null
        }
      }
    }, 1000)
    
  } catch (error: any) {
    const message = error.response?.data?.message || error.message || '发送失败，请稍后再试'
    ElMessage.error(message)
  } finally {
    codeSending.value = false
  }
}

// 从图标发送验证码
const sendEmailCodeFromIcon = () => {
  // 如果正在发送或倒计时中或邮箱为空，则不执行
  if (codeSending.value || countdown.value > 0 || !registerForm.email) {
    return
  }
  sendEmailCode()
}

// 处理注册
const handleRegister = () => {
  registerFormRef.value?.validate(async (valid) => {
    if (valid) {
      loading.value = true
      
      try {
        console.log('🎯 准备注册数据...')
        
        const registerData: RegisterRequest = {
          username: registerForm.username.trim(),
          password: registerForm.password,
          confirmPassword: registerForm.confirmPassword,
          nickname: registerForm.nickname.trim(),
          email: registerForm.email.trim(),
          emailCode: registerForm.emailCode.trim(),
          phone: registerForm.phone ? registerForm.phone.trim() : undefined,
          tenantId: tenantEnabled.value ? registerForm.tenantId : undefined,
          agreedToTerms: registerForm.agreedToTerms
        }
        
        console.log('🎯 发起注册请求...', {
          username: registerData.username,
          email: registerData.email
        })

        // 调用注册API
        const response = await authApi.register(registerData)
        
        console.log('✅ 注册成功:', response)
        
        // 显示成功提示
        ElMessage.success('注册成功！请使用您的账号和密码登录')
        
        // 记住用户名和租户，方便登录时自动填充
        localStorage.setItem('kexio-last-username', registerData.username)
        if (tenantEnabled.value && registerData.tenantId) {
          localStorage.setItem('kexio-tenant-id', registerData.tenantId)
        }
        
        // 延迟跳转到登录页面
        setTimeout(() => {
          router.push({
            path: '/login',
            query: {
              username: registerData.username
            }
          })
        }, 1500)
        
      } catch (error: any) {
        console.error('❌ 注册失败:', error)
        
        const errorMessage = error.response?.data?.message || error.message || '注册失败，请稍后再试'
        
        // 根据错误类型处理：设置后端错误并触发字段验证
        if (errorMessage.includes('验证码')) {
          // 验证码错误：在输入框下方显示
          backendErrors.emailCode = errorMessage
          registerFormRef.value?.validateField('emailCode')
        } else if (errorMessage.includes('用户名')) {
          // 用户名错误：在输入框下方显示
          backendErrors.username = errorMessage
          registerFormRef.value?.validateField('username')
        } else if (errorMessage.includes('邮箱')) {
          // 邮箱错误：在输入框下方显示
          backendErrors.email = errorMessage
          registerFormRef.value?.validateField('email')
        } else if (errorMessage.includes('手机号')) {
          // 手机号错误：在输入框下方显示
          backendErrors.phone = errorMessage
          registerFormRef.value?.validateField('phone')
        } else {
          // 其他错误：显示全局消息
          ElMessage.error(errorMessage)
        }
        
      } finally {
        loading.value = false
      }
    } else {
      console.log('表单验证失败')
      ElMessage.warning('请填写完整的注册信息')
    }
  })
}

// 清理定时器
onBeforeUnmount(() => {
  if (countdownTimer !== null) {
    window.clearInterval(countdownTimer)
    countdownTimer = null
  }
})
</script>

<style lang="scss" scoped>
@import '@/styles/modules/auth.scss';

// 注册页面特殊优化 - 增加卡片宽度以适应两列布局
.login-card {
  max-width: 640px !important; // 增加卡片宽度（原登录页是448px）
  padding: 24px !important; // 增加内边距让布局更舒适
  
  .login-title {
    margin-bottom: 20px !important; // 标题间距
  }
  
  .el-form-item {
    margin-bottom: 16px !important; // 表单项间距
    display: flex !important; // 确保使用flex布局
    flex-direction: column !important; // 垂直排列，label在上，内容在下
    
    &:last-child {
      margin-bottom: 0 !important;
    }
    
    // 确保Element Plus的content包裹层也垂直排列
    :deep(.el-form-item__content) {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
    }
  }
  
  // 确保label独立一行且有正确的样式
  .form-label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }
}

// 两列布局 - 更宽敞的列间距
.form-row {
  display: flex;
  gap: 20px; // 增加列之间的间距，让布局更宽松
  margin-bottom: 16px;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .form-col {
    flex: 1;
    margin-bottom: 0 !important; // 覆盖默认的margin-bottom
  }
  
  // 邮箱地址：2/3宽度
  .form-col-2 {
    flex: 2;
    margin-bottom: 0 !important;
  }
  
  // 验证码：1/3宽度
  .form-col-1 {
    flex: 1;
    margin-bottom: 0 !important;
  }
}

// 发送验证码图标
.send-icon {
  font-size: 16px;
  color: #666;
  transition: all 0.3s ease;
  padding: 4px;
  
  &:hover {
    color: #000;
    transform: scale(1.1);
  }
  
  &.fa-spinner {
    animation: spin 1s linear infinite;
  }
  
  &.fa-clock {
    color: #999;
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

// 邮箱验证码提示
.email-hint {
  margin-top: -8px; // 紧贴上方的表单行
  margin-bottom: 16px;
  padding-left: 4px;
}

// 表单提示
.form-hint {
  margin-top: 4px;
  font-size: 11px; // 更小的字体
  color: #909399;
  line-height: 1.4;
}

// 密码强度指示器 - 更紧凑
.password-strength {
  margin-top: 6px; // 减少顶部间距
  display: flex;
  align-items: center;
  gap: 10px;
  
  .strength-bar {
    flex: 1;
    height: 3px; // 更薄的进度条
    background-color: #e4e7ed;
    border-radius: 2px;
    overflow: hidden;
    
    .strength-fill {
      height: 100%;
      border-radius: 2px;
      transition: width 0.3s ease;
      
      &.weak {
        background-color: #f56c6c;
      }
      
      &.medium {
        background-color: #e6a23c;
      }
      
      &.strong {
        background-color: #67c23a;
      }
    }
  }
  
  .strength-text {
    flex-shrink: 0;
    font-size: 11px; // 更小的字体
    font-weight: 500;
    
    &.weak {
      color: #f56c6c;
    }
    
    &.medium {
      color: #e6a23c;
    }
    
    &.strong {
      color: #67c23a;
    }
  }
}

// 用户协议复选框 - 减少间距
.remember-me {
  margin-bottom: 12px !important;
}

// 注册按钮 - 减少间距
.login-button {
  margin-bottom: 12px !important;
}

// 底部链接 - 减少间距
.register-link {
  margin-bottom: 0 !important;
  
  p {
    margin: 0;
  }
}

// 链接文字
.link-text {
  color: var(--kx-primary);
  font-weight: 500;
  text-decoration: none;
  
  &:hover {
    text-decoration: underline;
  }
}

// 对话框内容
.dialog-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 20px;
  
  h3 {
    margin-top: 20px;
    margin-bottom: 12px;
    font-size: 16px;
    color: #303133;
    
    &:first-child {
      margin-top: 0;
    }
  }
  
  p {
    margin: 0 0 12px 0;
    line-height: 1.8;
    color: #606266;
  }
}

// 响应式优化
@media (max-width: 768px) {
  .login-card {
    max-width: 100% !important; // 移动端占满宽度
    padding: 20px !important;
    
    .login-title {
      margin-bottom: 16px !important;
    }
    
    .el-form-item {
      margin-bottom: 14px !important;
    }
  }
  
  // 平板端保持两列布局，但间距减小
  .form-row {
    gap: 16px;
  }
  
  .form-hint {
    font-size: 11px;
  }
  
  .password-strength {
    margin-top: 4px;
    gap: 8px;
    
    .strength-bar {
      height: 2px;
    }
    
    .strength-text {
      font-size: 10px;
    }
  }
}

// 小屏幕改为单列
@media (max-width: 640px) {
  .login-card {
    padding: 16px !important;
  }
  
  // 移动端改为单列布局
  .form-row {
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
    
    .form-col,
    .form-col-1,
    .form-col-2 {
      flex: none !important; // 移动端取消flex比例
      width: 100% !important; // 占满整行
      margin-bottom: 14px !important;
      
      &:last-child {
        margin-bottom: 0 !important;
      }
    }
  }
  
  .email-hint {
    margin-top: 4px; // 移动端调整间距
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: 12px !important;
    
    .login-title {
      font-size: 24px !important;
      margin-bottom: 12px !important;
    }
    
    .el-form-item {
      margin-bottom: 12px !important;
    }
  }
  
  .form-row {
    .form-col,
    .form-col-1,
    .form-col-2 {
      margin-bottom: 12px !important;
    }
  }
  
  .send-icon {
    font-size: 14px; // 移动端图标稍小
  }
  
  .email-hint {
    font-size: 10px; // 移动端字体更小
  }
}
</style>
